<template>
  <div>
    <!-- 新增弹窗 -->
    <el-dialog
      title="新增设备信息"
      :visible.sync="dialogVisible"
      width="30%"
    >
      <div>
        <!-- 前两行 -->
        <el-row
          :gutter="20"
          class="form"
        >
          <el-col :span="4">
            <div class="grid-content bg-purple">
              设别IP地址：
            </div>
          </el-col>
          <el-col :span="8">
            <el-input
              v-model="input1"
              placeholder="请输入"
            />
          </el-col>
          <el-col :span="4">
            <div class="grid-content bg-purple">
              设备归属组织：
            </div>
          </el-col>
          <el-col :span="8">
            <el-input
              v-model="input2"
              placeholder="请输入"
            />
          </el-col>
        </el-row>
        <el-row
          :gutter="20"
          class="form"
        >
          <el-col :span="4">
            <div class="grid-content bg-purple">
              设备类型：
            </div>
          </el-col>
          <el-col :span="8">
            <el-input
              v-model="input3"
              placeholder="请输入"
            />
          </el-col>
          <el-col :span="4">
            <div class="grid-content bg-purple">
              状态：
            </div>
          </el-col>
          <el-col :span="8">
            <el-input
              v-model="input4"
              placeholder="请输入"
            />
          </el-col>
        </el-row>
        <!-- 后两行 -->
        <el-row
          :gutter="20"
          class="form"
        >
          <el-col :span="4">
            <div class="grid-content bg-purple">
              设备信息描述(选填)：
            </div>
          </el-col>
          <el-col :span="20">
            <el-input
              v-model="input5"
              placeholder="请输入"
            />
          </el-col>
        </el-row>
        <el-row
          :gutter="20"
          class="form"
        >
          <el-col :span="4">
            <div class="grid-content bg-purple">
              备注：
            </div>
          </el-col>
          <el-col :span="20">
            <el-input
              v-model="input6"
              placeholder="请输入"
            />
          </el-col>
        </el-row>
      </div>

      <!-- 两个按钮 -->
      <span
        slot="footer"
        class="dialog-footer"
      >
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button
          type="primary"
          @click="dialogVisible = false"
        >确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      input1: "",
      input2: "",
      input3: "",
      input4: "",
      dialogVisible: true,
    //   dialogVisible: false,
    };
  },
};
</script>

<style scoped>
.form {
  margin-bottom: 20px;
}
.dialog-footer {
  text-align: center;
}
</style>